import React, {Component} from 'react';
import '../App.css';
import Add from './Add'
import Delet from './Delet'
import { Link} from 'react-router-dom'

class RudexDemo extends Component {

    state = {
        activIndex : -1,
        activeArr:[],
        blockData:[
            {
                'blockId':'区块哈希111111111111111111111111',
                'blockHeight':'块高1',
                'blockQutTime':'出块时间1',
                'num':5,
                'prevBlockId':'前一个区块哈希11111111111111111',
                'nextBlockId':'后一个区块哈希1111111111111111111111',
                'tradeData':[
                    {
                        'seqNo':'序号1',
                        'contractNo':'合同编号1',
                        'tradeType':'交易类型',
                        'tradeId':'交易哈希',
                        'tradeTime':'交易时间'
                    },
                    {
                        'seqNo':'序号2',
                        'contractNo':'合同编号2',
                        'tradeType':'交易类型',
                        'tradeId':'交易哈希',
                        'tradeTime':'交易时间'
                    },
                    {
                        'seqNo':'序号3',
                        'contractNo':'合同编号3',
                        'tradeType':'交易类型',
                        'tradeId':'交易哈希',
                        'tradeTime':'交易时间'
                    },

                ]
            },
            {
                'blockId':'区块哈希22222222222222222222222',
                'blockHeight':'块高2',
                'blockQutTime':'出块时间2',
                'num':5,
                'prevBlockId':'前一个区块哈希222222222222222222222222222',
                'nextBlockId':'后一个区块哈希222222222222222222222222222',
                'tradeData':[
                    {
                        'seqNo':'序号1',
                        'contractNo':'合同编号1',
                        'tradeType':'交易类型',
                        'tradeId':'交易哈希',
                        'tradeTime':'交易时间'
                    },
                    {
                        'seqNo':'序号2',
                        'contractNo':'合同编号2',
                        'tradeType':'交易类型',
                        'tradeId':'交易哈希',
                        'tradeTime':'交易时间'
                    },
                    {
                        'seqNo':'序号3',
                        'contractNo':'合同编号3',
                        'tradeType':'交易类型',
                        'tradeId':'交易哈希',
                        'tradeTime':'交易时间'
                    },

                ]
            },
            {
                'blockId':'区块哈希3333333333333',
                'blockHeight':'块高2',
                'blockQutTime':'出块时间2018',
                'num':50,
                'prevBlockId':'前一个区块哈希33333333333333',
                'nextBlockId':'后一个区块哈希3333333333333333',
                'tradeData':[
                    {
                        'seqNo':'序号1',
                        'contractNo':'合同编号1',
                        'tradeType':'交易类型',
                        'tradeId':'交易哈希',
                        'tradeTime':'交易时间'
                    },
                    {
                        'seqNo':'序号2',
                        'contractNo':'合同编号2',
                        'tradeType':'交易类型',
                        'tradeId':'交易哈希',
                        'tradeTime':'交易时间'
                    },
                    {
                        'seqNo':'序号3',
                        'contractNo':'合同编号3',
                        'tradeType':'交易类型',
                        'tradeId':'交易哈希',
                        'tradeTime':'交易时间'
                    },

                ]
            }
        ],
    }

    getActiveArr = () =>{
        this.setState({
            activeArr : this.state.blockData.map(item => {
                return false;
            })
        },()=>{
            console.log(this.state.activeArr)
        })
    }

    onSwitchE = (index) => {
        console.log(index)
        let arr =this.state.activeArr;
        if(arr[index]){
            arr[index] = false;
            this.setState({
                activeArr:arr
            })
        }else{
            arr[index] = true;
            this.setState({
                activeArr:arr
            })
        }
    }

    componentWillMount(){
        this.getActiveArr()
    }
    
    render() {

          
       const dataeds = this.state.blockData.map((item,index)=>{
           return (
                <React.Fragment key={index}>
                    <tr className="swither" onClick = {this.onSwitchE.bind(this,index)}>
                        <td>{item.blockHeight}</td>
                        <td>{item.blockId}</td>
                        <td>{item.prevBlockId}</td>
                        <td>{item.nextBlockId}</td>
                        <td>{item.num}</td>
                        <td>{item.blockQutTime}</td>
                    </tr>
                    <tr  className={ this.state.activeArr[index] === true ? "active lists" : "lists" }>
                        <td colSpan="6"  >
                            <div >
                                <table  className="table_b"   cellSpacing="0">
                                    <thead>
                                        <tr className="tableHead">
                                            <th>序号</th>
                                            <th>交易哈希</th>
                                            <th>交易类型</th>
                                            <th>合同ID</th>
                                            <th>交易时间</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {item.tradeData.map((val,i)=>{
                                            return (
                                                <tr key={i}>
                                                    <td>{val.seqNo}</td>
                                                    <td>{val.tradeId}</td>
                                                    <td>{val.tradeType}</td>
                                                    <td>{val.contractNo}</td>
                                                    <td>{val.tradeTime}</td>
                                                </tr>
                                            )
                                        })}
                                    </tbody>
                                </table>
                            </div>
                        </td>
                    </tr>
                </React.Fragment>
           )
       })


        return (
            <div>
                <h1 >
                    {this.props.text}
                </h1>
                <div className="wrap">
                    <Add clickAdd={this.props.onButtonClick}/>
                    <Delet  clickDelet={this.props.onChangeText(5)}/>
                </div>
                <Link to="/SelectUsers" >去开方</Link>

            



                <table  className = "tablewarp"    cellSpacing="0">
                    <thead>
                        <tr className="tableHead">
                            <th>区块高度</th>
                            <th>当前区块哈希</th>
                            <th>前哈希</th>
                            <th>后哈希</th>
                            <th>交易数量</th>
                            <th>出块时间</th>
                        </tr>
                    </thead>
                    <tbody>
                        {dataeds}
                    </tbody>
                </table>
            </div>

        );
    }
}

export default RudexDemo;
